<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>12-组件的生命周期</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
    class Life extends React.Component {


        /** 按钮回调 */
        handleSum = () => {
            this.setState({
                sum: this.state.sum + 1
            })
        }

        constructor(props) {
            super(props);
            console.log("组件最先调用");

            this.state = {sum: 0}
        }

        componentWillMount() {
            console.log("组件挂载之前执行");
        }

        render() {
            console.log("组件开始渲染");
            return (
                <div>
                    <h1>sum={this.state.sum}</h1>
                    <button onClick={this.handleSum}>点我+1</button>
                </div>
            )
        }

        componentDidMount() {
            console.log("组件挂载完成");
        }

        componentWillUnmount() {
            console.log("组件卸载之前执行");
        }

    }

    // 渲染数据
    ReactDOM.render(<Life/>, document.getElementById('app'));
</script>
</html>
